<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="110px" label-suffix=":" class="expert-class-1100" v-loading="loading">
            <el-form-item label="handle" prop="expert_id">
                <el-select v-model="model.expert_id" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in expertList" :key="item.expert_id" :label="item.expert_name" :value="item.expert_id"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="合创码" prop="creation_code">
                <el-input v-model.trim="model.creation_code" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="店铺" prop="shop_id">
                <el-select v-model="model.shop_id" placeholder="请选择" clearable>
                    <el-option v-for="item in shopList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="合作平台" prop="platform_id">
                <el-select v-model="model.platform_id" placeholder="请选择" clearable>
                    <el-option v-for="(dict, index) in PLATFORM_TYPE" :key="index" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="发布平台地址" prop="publish_url">
                <el-input v-model.trim="model.publish_url" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="合作状态" prop="cooperate_status">
                <el-select v-model="model.cooperate_status" placeholder="请选择" clearable>
                    <el-option v-for="(dict, index) in COOPERATION_STATUS" :key="index" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="合作方式" prop="cooperate_type">
                <el-select v-model="model.cooperate_type" placeholder="请选择" clearable>
                    <el-option v-for="item in COOPERATION_TYPE" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="个人主页" prop="link">
                <el-input v-model.trim="model.link" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="spu" prop="spu">
                <el-input v-model.trim="model.spu" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="sku" prop="sku">
                <el-input v-model.trim="model.sku" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="寄件订单编号" prop="order_number">
                <el-input v-model.trim="model.order_number" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="物流单号" prop="track_number">
                <el-input v-model.trim="model.track_number" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="物流状态" prop="fulfillment_status">
                <el-select v-model="model.fulfillment_status" placeholder="请选择" clearable>
                    <el-option v-for="item in LOGISTICS_STATUS" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否超时" prop="is_out">
                <el-select v-model="model.is_out" placeholder="请选择" clearable>
                    <el-option v-for="item in IS_TIMEOUT" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item label="付费金额" prop="payment_price" v-if="model.cooperate_type == 2">
                <el-input v-model.trim="model.payment_price" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="建联人" prop="fb_admin_id">
                <SelectPage
                    v-model="model.fb_admin_id"
                    placeholder="请选择建联人"
                    :url="$api.purchase.getPurchaserList"
                    show_field="username"
                    show_id="operater_id"
                    query_field="keyword"
                    filterable
                    clearable
                    popper-class="custom-select"
                ></SelectPage>
            </el-form-item>
            <el-form-item label="合作时间" prop="cooperate_time">
                <el-date-picker v-model="model.cooperate_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable> </el-date-picker>
            </el-form-item>
            <el-form-item label="过期时间" prop="expire_time">
                <el-date-picker v-model="model.expire_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable> </el-date-picker>
            </el-form-item>
            <el-form-item label="刊登时间" prop="publish_time">
                <el-date-picker v-model="model.publish_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable> </el-date-picker>
            </el-form-item>
            <el-form-item label="视频上传" prop="storage_url" style="width: 800px">
                <VideoUpload 
                    v-model="model.storage_url"
                    :upload-action="uploadUrl"
                    @success="handleVideoUploadSuccess"
                    @error="handleVideoUploadError" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { editExpertCooperate, addExpertCooperate, getExpert, getShop } from '@/api/expert'
import { COOPERATION_STATUS, PLATFORM_TYPE, COOPERATION_TYPE, LOGISTICS_STATUS, IS_TIMEOUT } from '../../constant'
import VideoUpload from '@/components/VideoUpload' 
export default {
    name: 'DetailDialog',
    components: { VideoUpload },
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            uploadUrl: process.env.VUE_APP_BASE_API + '/api/UploadInfo/uploadVideo', // 上传的图片服务器地址
            loading: false,
            save: false,
            model: {
                id: '',
                expert_name: undefined,
                email: undefined,
                kol_family_name: undefined,
                kol_phone: undefined,
                platform: undefined,
                country: undefined,
                address: undefined,
                province: undefined,
                city: undefined,
                post_code: undefined,
                link: undefined,
                quotation: undefined,
                fan: undefined,
                remarks: undefined,
                fb_admin_id: undefined,
                is_cooperate: undefined,
                type: undefined,
                storage_url: undefined,
            },
            rules: {
                expert_name: [{ required: true, message: '达人姓名不能为空', trigger: ['blur', 'change'] }],
                email: [{ required: true, message: '邮箱不能为空', trigger: ['blur', 'change'] }],
                kol_phone: [{ required: true, message: '达人电话不能为空', trigger: ['blur', 'change'] }],
            },
            COOPERATION_STATUS, // 合作状态
            PLATFORM_TYPE, // 平台
            COOPERATION_TYPE, // 合作方式
            LOGISTICS_STATUS, // 物流状态
            IS_TIMEOUT, // 是否超时
            expertList: [],
            shopList: []
        }
    },
    computed: {
        isEdit() {
            return !!this.model.id
        },
        title() {
            return `${this.isEdit ? '编辑' : '新增'}达人合作`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.model = Object.assign({}, this.model, val)
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async created() {
        try {
            const [expertData, shopData] = await Promise.all([getExpert(), getShop()])
            this.expertList = expertData?.data ?? []
            this.shopList = shopData?.data ?? []
        } catch (error) {
            console.log(error)
        }
    },
    methods: {
        // 视频上传成功回调
        handleVideoUploadSuccess(response, file, fileList) {
            // 可以在这里添加额外的处理逻辑
            console.log('视频上传成功', response)
            this.model.storage_url = response?.data
        },
        
        // 视频上传失败回调
        handleVideoUploadError(err, file, fileList) {
            // 可以在这里添加额外的错误处理逻辑
            console.log('视频上传失败', err)
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }

                this.model.expert_name = this.expertList.find(item => item.expert_id === this.model.expert_id).expert_name
                const params = { ...this.model }
                console.log('params', params)
                if (this.save) {
                    return
                }
                this.save = true
                if (this.isEdit) {
                    editExpertCooperate(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                } else {
                    addExpertCooperate(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                }
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.expert-class-1100.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.expert-class-1100.el-form .el-form-item .el-input {
    width: 280px;
}
.expert-class-1100.el-form .el-form-item .el-textarea {
    width: 770px;
}
</style>
